import 'package:cached_network_image/cached_network_image.dart';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shop/common/common.dart';
import 'package:shop/page/play_page.dart';

class MoviePage extends StatefulWidget {
  const MoviePage({Key? key}) : super(key: key);

  @override
  State<MoviePage> createState() => _MoviePageState();
}

class _MoviePageState extends State<MoviePage> with AutomaticKeepAliveClientMixin {
  final List _data = [];
  @override
  void initState() {
    super.initState();
    _getData();
  }

  void _getData() async {
    final res = await Dio().get('https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10');
    if (res.statusCode == 200) {
      final _list = res.data["result"]["list"];
      print("-----$_list");
      _data.addAll(_list);
      _data.insert(
        0,
        {
          'playUrl':
              'https://kzx1.360kan.com/xxl-kzx-bj/6b376621f43dabe3de94f1df552c2dba-1920-1670835028.mp4?sign=dbe1c4829604ee555d4a0cf3e2f44bb9&time=1672226996',
          'coverUrl':
              'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0212%2Fcc2ef007j00r768nx003dc000j900mom.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
          'userName': '肥仔来了',
          'title': '这真是我见过，最尴尬的带货直播了！完全看不懂！',
          'id': '120',
          'duration': '00:43'
        },
      );
      _data.insert(
        0,
        {
          'playUrl':
              'https://kzx1.360kan.com/xxl-kzx-bj/1598e89cb8f694851be6414488f834fc-1920-1667111253.mp4?sign=7db92a6814661bf285a1f4c4b57251f5&time=1672229920',
          'coverUrl': 'https://p0.ssl.qhimgs1.com/sdr/400__/t01df076a0316ad29ce.webp',
          'userName': '娱乐日爆社',
          'title': '为什么越来越流行二手手机了？',
          'id': '120',
          'duration': '01:50'
        },
      );
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: AppColor.mainColor,
        title: Text("视界"),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          final model = _data[index];
          return GestureDetector(
            onTap: () {
              Navigator.push(
                  context, CupertinoPageRoute(builder: (context) => PlayPage(params: {'url': model['playUrl']})));
            },
            child: SizedBox(
              height: 280,
              child: Card(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                clipBehavior: Clip.antiAlias,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Stack(
                        fit: StackFit.expand,
                        alignment: Alignment.center,
                        children: [
                          CachedNetworkImage(
                            imageUrl: model['coverUrl'],
                            fit: BoxFit.cover,
                          ),
                          Positioned.fill(
                            child: Container(
                              color: Colors.black.withOpacity(0.4),
                            ),
                          ),
                          Positioned(
                            height: 50,
                            width: 50,
                            child: Container(
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                  color: Colors.white,
                                  width: 1,
                                ),
                              ),
                              child: const Icon(
                                Icons.play_arrow_outlined,
                                size: 30,
                                color: Colors.white,
                              ),
                            ),
                          ),
                          Positioned(
                            right: 10,
                            bottom: 10,
                            child: Text(
                              model['duration'],
                              style: AppFont.textStyle(13, color: Colors.white),
                            ),
                          )
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8, top: 6),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            model['title'],
                            style: AppFont.textStyle(16, color: Colors.black),
                          ),
                          const SizedBox(height: 8),
                          Row(
                            children: [
                              Text(
                                "作者: ${model['userName']}",
                                style: AppFont.textStyle(
                                  13,
                                  color: Colors.grey,
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        },
        itemCount: _data.length,
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
